<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>验收</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }
      
      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }
      
      .mui-bar~.mui-pull-top-tips {
        top: 24px;
      }
      
      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }
      
      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }
      
      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
              -webkit-transition-duration: 400ms;
              transition-duration: 400ms;*/
        margin: 0;
      }
      
      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }
      
      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }
      
      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }
      
      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }
      
      .mui-pull-top-canvas canvas {
        width: 40px;
      }
      
      .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      }
      
      .silder-wrap {
        height: 60px;
      }
      
      .mui-fullscreen .mui-segmented-control~.mui-slider-group {
        top: 60px;
      }
      
      .mui-segmented-control .mui-control-item {
        line-height: 60px;
      }
      
      .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        color: #3188FE;
        position: relative;
      }
      
      .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: #3188FE;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
      }
      
      .lists {
        padding: 20px;
      }
      
      .lists li {
        margin-bottom: 10px;
        /*display: flex;
        justify-content: space-between;*/
      }
      
      .lists li:last-child {
        margin: 0;
      }
      
      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }
      
      .lists li .right_name {
        color: #333333;
        float: right;
      }
      
      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #999999;
        font-size: 18px;
      }
      
      .tag {
        display: inline-block;
        width: 55px;
        height: 20px;
        line-height: 20px;
        transform: skewX(-15deg);
        text-align: center;
        color: #FFFFFF;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">验收</h1>
      </header>
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <!--<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted silder-wrap" style="background-color: #fff;">
            <a class="mui-control-item mui-active" href="#item1"><span class="txt">项目列表</span></a>
            <a class="mui-control-item" href="#item2"><span class="txt">任务列表</span></a>
          </div>-->
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <!--<div id="item1-scroll">-->
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <div class="mui-card card_content" v-for="item in projectList" :key="item.id" v-cloak @tap="toTotal(item)">
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis mui-navigate-right">
                            <span :class="['tag', status(item.ss, 1)]">{{status(item.ss, 0)}}</span>
                            <span>{{item.n}}</span>
                          </li>
                          <li class="lis color-999 text-sm">
                            <span>开始时间：{{formatDate(item.st)}}</span>
                          </li>
                          <li class="lis color-999 text-sm">
                            <span>结束时间：{{formatDate(item.et)}}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!--</div>-->
              </div>
            </div>
            <!--<div id="item2" class="mui-slider-item mui-control-content">
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <div class="mui-card card_content" v-for="item in taskList" @tap="toList(item)">
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis mui-navigate-right">
                            <span :class="['tag', status(item.ss, 1)]">{{status(item.ss, 0)}}</span>
                            <span>{{item.n}}</span>
                          </li>
                          <li class="lis color-999 text-sm">
                            <span>开始时间：{{formatDate(item.st, 'yyyy-MM-dd hh:mm')}}</span>
                          </li>
                          <li class="lis color-999 text-sm">
                            <span>结束时间：{{formatDate(item.et, 'yyyy-MM-dd hh:mm')}}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>-->
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript">
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
      let lineType =null;
      let ids = 1;
      var db={};
      const dbName = 'myDBchecks'; // 数据库的名字
      const storeName = 'checkPackage'; //仓库名称
      mui.plusReady(async function() {
        vm.lineType= getSysInfo();
             lineType= getSysInfo();
         // const dbName = 'myDB', storeName = 'processPackage'
        await openDB(dbName, storeName, 1).then(res=>{
           console.log('111',res)
           db=res
           // return res
         })
         if(!lineType){
           getLineData()
           return 
         }
        getProject(page)
//      getTaskList(donePage)
      })
      var vm = new Vue({
        el: '#container',
        data: {
          projectList: [],
          taskList: [],
          lineType :null
        },
        created: function() {
          //        getProject(page)
          //        getTaskList(donePage)
        },
        methods: {
          status(status, type) {
            if(type == 0) {
              if(status == 0) {
                return '未开始'
              } else if(status == 1) {
                return '确认中'
              } else {
                return '已确认'
              }
            } else if(type == 1) {
              if(status == 0) {
                return 'bg-blue'
              } else if(status == 1) {
                return 'bg-green'
              } else {
                return 'bg-gray'
              }
            }

          },
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          toTotal(item) {
			// projectTotal.html 项目总览
            mui.baseApp.openWindow('./project_task_list.html', {
              projectId: item.id
            })
          },
          toTask(item) {
            mui.baseApp.openWindow('./project_task_list.html', {
              projectId: item.id
            })
          },
          toList(item) {
            //          projectCategory  项目分类，0:常规项目 1:单任务项目
            mui.baseApp.openWindow('./taskTotal.html', {
              projectTaskId: item.id,
              projectCategory: 1
            })
          }
        }
      });

      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });
        $.ready(function() {
          //循环初始化所有下拉刷新，上拉加载。
          $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
            $(pullRefreshEl).pullToRefresh({
              down: {
                callback: function() {
                  var self = this;
                  setTimeout(function() {
                    if(index === 0) {
                      page = 1
                      getProject(page);
                    } else {
                      donePage = 1;
                      getTaskList(donePage);
                    }
                    self.endPullDownToRefresh();
                  }, 1000);

                }
              },
              up: {
                callback: function() {
                  var self = this;
                  setTimeout(function() {
                    console.log(index)
                    if(index === 0) {
                      page++;
                      getProject(page);
                    } else {
                      donePage++;
                      getTaskList(donePage);
                    }
                    self.endPullUpToRefresh();
                  }, 1000);
                }
              }
            });
          });
          mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
//        mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        });
      })(mui);

      function getProject(page) {
        if(page === 1) {
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("get", "/app/api/check/project", {
          page: page,
          size: size,
          stage: 5
        }, function(data) {
          console.log(data)
          plus.nativeUI.closeWaiting();
          if(page == 1) {
            vm.projectList = []
          }
          vm.projectList = vm.projectList.concat(data.records)
          let datas={
            id:1,
            records:[...vm.projectList]||[]
          } 
          getSearchData(datas)
          if(data.records.length < size) { //
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
            mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }

      function getTaskList(page) {
        console.log(111)
        if(page === 1) {
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("get", "/app/api/check/task", {
          page: page,
          size: size,
          stage: 5,
          projectCategory: 1
        }, function(data) {
          plus.nativeUI.closeWaiting();
          if(page == 1) {
            vm.taskList = []
          }
          // let datas={
          //   id:1,
          //   records:[...data.records]||[]
          // } 
          // getSearchData(datas)
          vm.taskList = vm.taskList.concat(data.records)
          if(data.records.length < size) { //
            mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
            mui("#item2 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e.detail.slideNumber);
      });
      function getLineData(){
        getDataByKey(db, storeName, ids).then(res=>{
           plus.nativeUI.closeWaiting(); 
          console.log('获取离线数据',JSON.stringify(res))
          let data=res
          // vm.projectList = data.records
          if(page == 1) {
            vm.projectList = []
          }
           vm.projectList = vm.projectList.concat(data.records)
           if(data.records.length < size) { //
             mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
             return;
           } else {
             mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
             mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
           }
        })
      }
      function getSearchData(data){
        //通过游标
        cursorGetData(db, storeName).then(res=>{
          console.log('获取缓存',res)
          if(res&&res.length>0){
            if(data.id==res[0].id){
              getUpData(data)
            }else{
              getLineAdd(data)
            }
          }else{
             getLineAdd(data)
          }
         }).catch(function (error) {
          console.log(error);
         })
       }
      function getLineAdd(data){
         console.log('add',data)
         addData(db, storeName, data).then(res=>{
           console.log('add数据',res)
           // return res
         })
       }
       function getUpData(data){
         updateDB(db, storeName, data)
       }
      function getSysInfo() {
		  // return false
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
      window.addEventListener('back', function(event) {
        let data = event.detail
        donePage = 1
        page = 1
        getTaskList(donePage)
        getProject(page)
      });
    </script>
  </body>

</html>